<template>
  <Container>
    <template v-slot:table>
      <el-tree :data="tableData" node-key="userId" :default-expanded-keys="defaultExpandIds" :props="defaultProps"
        :expand-on-click-node="false" @node-expand="handleNodeExpand" @node-collapse="handleNodeCollapse">
        <span class="custom-tree-node" slot-scope="{ node, data }">
          <span>
            <span class="label">用户名：<span class="content">{{ node.label }}</span></span>
            <span class="label">角色类型：<span class="content">{{ data.roleTypeStr }}</span></span>
          </span>
          <span>
            <el-button type="text" @click.stop="auditUser({ userId: data.userId, reviewStatus: true })">通过</el-button>
            <el-button type="text" @click.stop="auditUser({ userId: data.userId, reviewStatus: false })">不通过</el-button>
            <el-button type="text" @click.stop="handleClickDel([data])">删除</el-button>
          </span>
        </span>
      </el-tree>
    </template>
  </Container>
</template>

<script>
import Container from "@/components/Container"
import webUser from "@/api/webUser";
export default {
  components: { Container },
  data () {
    return {
      tableData: [],
      defaultExpandIds: [],
      defaultProps: {
        children: 'child',
        label: 'userName'
      },
    }
  },
  watch: {},
  mounted () {
    this.queryAuditList();
  },
  methods: {
    queryAuditList () {
      webUser.queryAuditList().then(res => {
        let { data } = res;
        this.tableData = data;
      }).catch(err => {
        console.log(err)
      })
    },
    async auditUser (data) {
      let { code, msg } = await webUser.examine(data);
      console.log(code, msg)
      if (code == 1) {
        this.$message.success(msg || '操作成功')
      } else {
        this.$message.warning(msg || '操作失败')
      };
      this.queryAuditList()
    },
    handleClickDel (rowList = []) {
      let list = [];
      rowList.forEach(item => {
        list.push(item.userId)
      })
      if (rowList.length == 0) return;
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        webUser.delList(list).then(res => {
          if (res.code = 1) {
            this.queryAuditList();
            this.$message.success('删除成功')
          } else {
            this.$message.warning('删除失败')
          }
        }).catch(err => {
          this.$message.warning('删除失败')
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    // 树节点展开
    handleNodeExpand (data) {
      // 保存当前展开的节点
      let flag = false
      this.defaultExpandIds.some(item => {
        if (item === data.userId) { // 判断当前节点是否存在， 存在不做处理
          flag = true
          return true
        }
      })
      if (!flag) { // 不存在则存到数组里
        this.defaultExpandIds.push(data.userId)
      }
    },
    // 树节点关闭
    handleNodeCollapse (data) {
      // 删除当前关闭的节点
      this.defaultExpandIds.some((item, i) => {
        if (item === data.userId) {
          this.defaultExpandIds.splice(i, 1)
        }
      })
      this.removeChildrenIds(data) // 这里主要针对多级树状结构，当关闭父节点时，递归删除父节点下的所有子节点
    },
    // 删除树子节点
    removeChildrenIds (data) {
      const ts = this
      if (data.children) {
        data.children.forEach(function (item) {
          const index = ts.defaultExpandIds.indexOf(item.id)
          if (index > 0) {
            ts.defaultExpandIds.splice(index, 1)
          }
          ts.removeChildrenIds(item)
        })
      }
    },
  }
}
</script>

<style lang="scss" scoped>
.row {
  padding-bottom: 15px;
}

.label {
  display: inline-block;
  min-width: 200px;
  padding-right: 20px;

  .content {
    color: #04a4e4;
  }
}

::v-deep .custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-right: 8px;
  font-size: 14px;
}

::v-deep .el-tree-node__content{
  height: 40px;
}
</style>
